<template>
    <div class="title">生命周期及选项式中的钩子函数</div>
    <div class="unitBar inner">
        <span class="spanTest">页面显示的值：&nbsp;</span><span class="test">{{ numAccount }}</span>
        <button @click="addNumAccount">点击numAcount++</button>
        <button @click="showOrhidden">显示或隐藏</button>
        <Myvue v-if="flag"></Myvue>
    </div>
    
</template>
<script>
import { ref } from 'vue';
import Myvue from '@/components/my.vue';
export default {
    name: 'WithData',
    components: { Myvue },
    data() {
        return {
            numAccount: 0,
            flag: ref(true),

        }
    },
    methods: {
        addNumAccount() {
            this.numAccount++;
        },

        showOrhidden() {
            this.flag = !this.flag;
        }
    },
    beforeCreate() {
        //创建之前 data、methods、以及视图页面都未被创建
        console.log('----beforeCreate');
        // console.log(this);
        // console.log(this.numAccount);
        // console.log(this.addNumAccount);
        // console.log(document.querySelector('.spanTest').innerHTML);
    },
    created() {
        // 已创建 data、methods、可以被打印  页面无法访问
        console.log('----create');
        // console.log(this);
        // console.log(this.numAccount);
        // console.log(this.addNumAccount);
        // console.log(document.querySelector('.spanTest').innerHTML);
    },
    beforeMount() {
        // 已创建 data methods 可以被打印  页面无法访问
        console.log('----beforeMount');
        // console.log(this);
        // console.log(this.numAccount);
        // console.log(this.addNumAccount);
        // console.log(document.querySelector('.spanTest').innerHTML);
    },
    mounted() {
        //已挂载 可以访问页面
        console.log('----mounted');
        // console.log(this);
        // console.log(this.numAccount);
        // console.log(this.addNumAccount);
        // console.log(document.querySelector('.spanTest').innerText);
    },
    beforeUpdate() {
        //内存中的数据被修改，但页面还未更新，还是访问的旧DOM
        console.log('----beforeUpdate');
        // console.log('numAccount', this.numAccount);
        // console.log('beforeUpdate', document.querySelector('.test').innerHTML);
    },
    updated() {
        //访问的数据修改后的新Dom
        console.log('----updated');
        // console.log('updated', document.querySelector('.test').innerHTML);
    },
    // beforeUnmount() {
    // 组件 的卸载前调用
    //     console.log('----beforeUnmount');
    //     console.log('beforeUnmount', this.flag);
    // },
    // unmounted() {
    //     console.log('----unmounted');
    //     console.log('unmounted', this.flag);
    // }
}
</script>
<style scoped>

button {
    display: block;
    margin-top: 10px;
}
</style>

